<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }
      div {
        width: 300px;
        font-size: 26px;
        font-weight: 700;
        margin: 100px auto;
      }
      span {
        display: inline-block;

        width: 60px;
        height: 40px;
        background-color: pink;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="box">距离光棍节还有</div>
    <span class="tt">天</span>
    <span class="ss">时</span>
    <span class="ff">分</span>
    <span class="mm">秒</span>

    <script>
      var tt = document.querySelector('.tt');
      var ss = document.querySelector('.ss');
      var ff = document.querySelector('.ff');
      var mm = document.querySelector('.mm');
      var star = +new Date('2020-11-11 00:00:00');

      function arr() {
        var time = +new Date();
        var timer = (star - time) / 1000;
        var t = Math.floor(timer / 60 / 60 / 24);
        var h = Math.floor(timer / 60 / 60) % 24;
        var m = Math.floor(timer / 60) % 60;
        var s = Math.floor(timer % 60);
        h = h < 10 ? '0' + h : h;
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        tt.innerHTML = t + '天';
        ss.innerHTML = h + '时';
        ff.innerHTML = m + '分';
        mm.innerHTML = s + '秒';
      }
      arr();
      setInterval(arr, 1000);
    </script>
  </body>
</html>
